<template>
  <div>
    <Form ref="form" :label-width="90" style="height: 30px">
      <Row :gutter="24" type="flex" justify="end">
        <Col span="18">
          <FormItem label="名称：">
            <Input v-model="userName" placeholder="请输入查询条件" />
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem>
            <Button
              type="default"
              icon="md-search"
              style="margin-left: 5px"
              @click="handleSubmit"
            ></Button
            >&nbsp;&nbsp;
            <Button
              type="default"
              icon="md-refresh"
              @click="handleReset"
            ></Button>
          </FormItem>
        </Col>
      </Row>
    </Form>
    <Table
      ref="table"
      :columns="tableColumns"
      :data="list"
      :loading="loading"
      :size="tableSize"
      class="ivu-mt"
    >
      <template slot-scope="{ row }" slot="action">
        <div @click.stop.prevent>
          <a type="text" @click="handleSelect(row)">选择</a>
        </div>
      </template>
    </Table>
    <div class="ivu-mt ivu-text-center">
      <Page
        :total="pageNation.total"
        :page-size-opts="pageSizeOpts"
        :current.sync="pageNation.pageNumber"
        show-total
        show-sizer
        show-elevator
        :page-size="pageNation.pageSize"
        @on-change="handleChangePage"
        @on-page-size-change="handleChangePageSize"
      />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      grid: {
        xl: 8,
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24,
      },
      columns: [
        { title: "姓名", key: "peopleName", minWidth: 140, show: true },
        { title: "编码", key: "sf_code", minWidth: 140, show: true },
        { title: "手机号码", key: "phone", minWidth: 140, show: false },
        { title: "性别", key: "gender", minWidth: 200, show: true },
        {
          title: "选择",
          key: "action",
          slot: "action",
          minWidth: 200,
          align: "center",
          fixed: "right",
          show: true,
        },
      ],
      models: {
        //模型
        person: {
          type: "people",
          modelType: "resource",
          className: "person",
        },
      },
      loading: false,
      list: [],
      selectedData: [],
      tableSize: "default",
      submitting: false,
      pageSizeOpts: [10, 30, 50, 100],
      pageNation: { total: 0, pageSize: 10, pageNumber: 1 },
      dataSource: ["insInfo", "allUserInfo"],
      selectedUserData: [],
      userName: "",
    };
  },
  props: {
    selectedRoleIds: {
      default: () => {
        return [];
      },
    },
  },
  computed: {
    // 动态设置列
    tableColumns() {
      const columns = [...this.columns];
      return columns.filter((item) => item.show);
    },
    offset() {
      return (this.pageNation.pageNumber - 1) * this.pageNation.pageSize;
    },
  },
  mounted() {
    //  this.getData();
    this.models["person"].clzs = this.$modelObject.create(
      this.models["person"].modelType + "Collection"
    );
  },
  methods: {
    getData() {
      if (this.loading) return;
      this.loading = true;
      // 下面的 params 是获取的表单查询参数
      this.pageNation.total = 0;
      this.list = [];
      let filter = { type: "people", className: "person", condition: "" };
      if (this.userName != null && this.userName != "") {
        filter.condition = 'peopleName=="' + this.userName + '"';
      }

      this._$queryByPage(
        this.models["person"].clzs,
        this.pageNation,
        filter,
        "",
        "updateTime",
        false
      ).then((res) => {
        this.loading = false;
        this.list = this.models["person"].clzs.valueRecords.map((item) => {
          return {
            ...item.values,
            ...item,
          };
        });
      });
      // this.$api.EntityInstance.queryByPage(this.pageNation.pageNumber,this.pageNation.pageSize,filter).then(res => {
      //     let tempData = res.records;
      //     // 2.转换数据格式
      //     if (tempData.length > 0) {
      //         tempData.forEach((item) => {
      //             let newObj = {id: item.id,sf_name:item.values.sf_name,sf_code:item.values.sf_code,sf_idNumber:item.values.sf_idNumber,phone: item.values.phone,email: item.values.email};
      //             this.list.push(newObj);
      //         })
      //     } else {
      //         this.list = [];
      //     }
      //     this.pageNation.total = res.recordCount;
      //     this.pageNation.pageNumber = res.pageNumber;
      //     this.pageNation.pageSize = res.pageSize;
      // }).finally(()=>{
      //     this.loading = false;
      // })
    },
    handleSubmit() {
      this.getData();
    },
    handleReset() {
      this.userName = "";
      this.getData();
    },
    // 刷新表格数据
    handleRefresh() {
      this.getData();
    },
    // 切换页码
    handleChangePage(page) {
      this.pageNation.pageNumber = page;
      this.getData();
    },
    // 切换每页条数
    handleChangePageSize(size) {
      this.pageNation.pageNumber = 1;
      this.pageNation.pageSize = size;
      this.getData();
    },
    // 选中一项，将数据添加至已选项中
    handleSelect(row) {
      this.selectedUserData.push(row);
      this.$emit("handleSubmit", row);
    },
  },
};
</script>
